<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试报名</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'GradeList' }"
            >选择考试级别</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'CheckEnroll' }"
            >选择考试项目</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'AddUserInforList' }"
            >填写报名信息</el-breadcrumb-item
          >
          <el-breadcrumb-item>确认报名</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="confirm_order_content">
        <!-- 步骤条 -->
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <div class="confirm_order_steps">
              <div class="confirm_order_steps_title">报名流程</div>
              <el-steps :active="3" finish-status="success" align-center>
                <el-step title="选择考试级别"></el-step>
                <el-step title="选择考试项目"></el-step>
                <el-step title="填写报名信息"></el-step>
                <el-step title="确认报名"></el-step>
                <el-step title="支付费用"></el-step>
              </el-steps>
            </div>
          </el-col>
        </el-row>
        <!-- 考试信息 -->
        <el-row type="flex">
          <el-col :span="24">
            <div class="confirm_order_title">考试信息</div>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="13">
            <el-table :data="enrollData" border size="mini" style="width: 100%">
              <el-table-column
                prop="exam_level"
                label="考试项目级别"
                width="170"
                align="center"
                :formatter="formatterLevelFn"
              >
              </el-table-column>
              <el-table-column
                prop="title"
                label="考试项目"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="area_name"
                label="考点"
                width="110"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="address"
                label="考场地址"
                align="center"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 报名信息 -->
        <el-row type="flex">
          <el-col :span="24">
            <div class="confirm_order_title">报名信息</div>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <el-table
              :data="examineeShowList"
              border
              size="mini"
              style="width: 100%"
              v-if="enrollData[0]"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="考生名称"
                width="150"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="identity_number"
                label="身份证号"
                width="220"
                align="center"
              ></el-table-column>

              <el-table-column label="考试项目" align="center">
                <template>
                  <div>{{ enrollData[0].title }}</div>
                </template>
              </el-table-column>

              <el-table-column
                prop="date"
                label="考试日期"
                align="center"
                width="250"
                :formatter="formatterDateFn"
              ></el-table-column>

              <el-table-column
                prop="height"
                label="身高"
                width="100"
                align="center"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <div class="confirm_order_pagination">
              <el-pagination
                @size-change="listSizeChange"
                @current-change="listCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <!-- 底部提交 -->
    <div class="confirm_order_bottom">
      <el-button
        type="danger"
        size="mini"
        icon="iconfont icon-bg-save"
        class="save_btn"
        @click="confirmBtn()"
        >确认</el-button
      >
      <el-button
        type="info"
        size="mini"
        icon="iconfont icon-w_fanhui"
        @click="backBtn()"
        >返回上一页</el-button
      >
    </div>
  </div>
</template>
<style src="../../assets/css/enroll/confirmOrder.css" scoped></style>

<script>
export default {
  name: "ConfirmOrder",
  components: {},
  data() {
    return {
      enrollId: "", // 当前选择考试
      enrollData: [], // 考试活动信息
      examineeList: [],
      examineeShowList: [],
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      statusList: [
        {
          key: 1,
          value: "可报名",
        },
        {
          key: 2,
          value: "未开始",
        },
        {
          key: 3,
          value: "已结束",
        },
        {
          key: 4,
          value: "名额已满",
        },
      ], // 报名状态列表
      dateCheckList: [], // 可选时间列表数据
      levelList: this.$store.state.levelList, // 等级列表
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    this.enrollId = this.$store.state.checkedEnrollId;
    let list = [];
    let setData = this.$store.state.examineeInforList;
    for (let item in setData) {
      if (setData[item].length > 0) {
        list = list.concat(setData[item]);
      }
    }
    this.examineeList = list;
    this.total = this.examineeList.length;
    this.getenrollDataFn();
  },
  methods: {
    // 考试数据
    getenrollDataFn: function () {
      let that = this;
      let url = "/mobile/examDetail";
      let data = {
        exam_id: this.enrollId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.enrollData = [];
            that.enrollData.push(response.exam_info);
            that.getTimeListFn();
          } else {
            that.loadingKey = false;

            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 查询考试时间
    getTimeListFn: function () {
      let that = this;
      let url = "/mobile/examtimeList";
      let data = {
        exam_id: this.enrollId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let list = [];
            response.exam_times.forEach(function (item) {
              let obj = {
                value: item.id,
                label:
                  response.exam_info.exam_date + " " + item.exam_time_start,
                // + "-" + item.exam_time_end,
              };
              list.push(obj);
            });
            that.dateCheckList = list;
            that.setShowListFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 报名时间格式化
    formatterDateFn: function (row) {
      let date = row.date;
      let text = "";
      this.dateCheckList.forEach(function (item) {
        if (item.value == date) {
          text = item.label;
        }
      });
      return text;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.setShowListFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.setShowListFn();
    },
    // 设置列表显示数据
    setShowListFn: function () {
      this.total = this.examineeList.length;
      let page = this.currentPage;
      let size = this.pageSize;
      let start = (page - 1) * size;
      let end = page * size;
      let list = [];
      if (start == this.total) {
        page = page - 1;
        this.currentPage = page;
        start = (page - 1) * size;
        end = page * size;
      }

      for (let i = start; i < end; i++) {
        if (this.examineeList[i]) {
          list.push(this.examineeList[i]);
        }
      }
      this.examineeShowList = list;
    },
    // 返回上一页
    backBtn: function () {
      this.$router.go(-1);
    },
    // 考试等级格式化
    formatterLevelFn: function (row) {
      let exam_level = row.exam_level;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == exam_level) {
          text = item.value;
        }
      });
      return text;
    },
    // 确认提交
    confirmBtn: function () {
      let that = this;
      this.$confirm("确认提交报名?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/mobile/createEnrollOrderOg";
        let stu_link_examtime = [];
        let data = {
          exam_id: that.enrollId,
        };
        that.examineeList.forEach(function (item) {
          let obj = {
            stu_id: item.id,
            examtime_id: item.date,
          };
          stu_link_examtime.push(obj);
        });
        data.stu_link_examtime = stu_link_examtime;
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("提交成功");
              that.$store.commit("set_examineeInforList", {});
              that.$router.push({
                name: "PaymentOrder",
                params: {
                  orderId: response.order_id,
                  way: 1,
                },
              });
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
  },
};
</script>
